Skip to content

feat(ui5-user-settings-notifications-view): introduce NotificationsView in UserSettingsDialog - #13885

Open
dobromiraboycheva wants to merge 16 commits into
mainfrom
user-settings-notifications
Open

feat(ui5-user-settings-notifications-view): introduce NotificationsView in UserSettingsDialog#13885
dobromiraboycheva wants to merge 16 commits into
mainfrom
user-settings-notifications

Conversation

@dobromiraboycheva

@dobromiraboycheva dobromiraboycheva commented Aug 3, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Overview

Introducing a new UserSettingsNotificationsView component family for managing notification preferences inside UserSettingsDialog. The design follows a primary → detail drill-in
pattern: a primary view lists all notification types (optionally grouped), and each navigable item opens a dedicated secondary view with its own independent state.

Structure

Three new components:

  • ui5-user-settings-notifications-view — extends UserSettingsView. Acts as both the primary list view and the secondary detail view (marked with secondary). Handles drill-in
    navigation automatically by matching a clicked item's item-key to the id of a sibling secondary view. If no id matches, falls back to the first secondary sibling and sets its
    text to the clicked item's label. Navigation can be fully overridden by canceling the item-click event.
  • ui5-user-settings-notifications-view-group — extends ListItemGroup. Groups items under a bold section header with a separator line, per the Fiori notifications design spec.
  • ui5-user-settings-notifications-view-item — extends ListItemCustom. A toggle row with a title, an optional byline, and a trailing switch reflecting checked. Setting
    navigable renders a navigation arrow and makes the row clickable. The trailing switch can be replaced entirely via the endContent slot (e.g. a ui5-select for frequency); when
    endContent is provided the switch and switch-change event are suppressed.

API

ui5-user-settings-notifications-view-item properties

Property Type Default Description
itemKey string "" Unique key used to match a sibling secondary view by id for drill-in navigation.
text string "" Title text of the item.
bylineText string "" Secondary descriptive text rendered below the title.
checked boolean false Whether the trailing switch is on. Ignored when endContent is used.
navigable boolean false When set, a navigation arrow is shown and clicking fires the parent view's item-click event.

ui5-user-settings-notifications-view-item slots

Slot Description
endContent Replaces the default trailing switch with custom content (e.g. ui5-select). Suppresses switch-change.

ui5-user-settings-notifications-view-group properties

Property Type Default Description
headerText string "" Bold section title rendered above the grouped items.

ui5-user-settings-notifications-view slots

Slot Description
default Mix of ui5-user-settings-notifications-view-item and ui5-user-settings-notifications-view-group elements.
headerItems Product-level toggle items rendered as individual role="form" landmarks above the grouped items list. Each item is a separate Tab stop. Use for top-level toggles like "Allow Notifications".
additionalContent Content rendered above the list (e.g. an ui5-message-strip).

Usage

Primary view with groups and navigable items:
Screenshot 2026-08-03 at 15 14 57

<ui5-user-settings-item icon="bell" text="Notifications" header-text="Notifications">
  <ui5-user-settings-notifications-view id="notifications-main-view">
    <ui5-message-strip slot="additionalContent" design="Information" hide-close-button>
      Some settings are managed by your organization.
    </ui5-message-strip>

    <!-- Product-level toggles — each is a separate Tab stop -->
    <ui5-user-settings-notifications-view-item slot="headerItems" text="Allow Notifications" checked></ui5-user-settings-notifications-view-item>

    <ui5-user-settings-notifications-view-group header-text="Sales">
      <ui5-user-settings-notifications-view-item item-key="sales-updates" text="Sales Order Updates" checked navigable></ui5-user-settings-notifications-view-item>
    </ui5-user-settings-notifications-view-group>
  </ui5-user-settings-notifications-view>

  <!-- Secondary detail view — matched by item-key ↔ id -->
  <ui5-user-settings-notifications-view id="sales-updates" secondary>
    <ui5-user-settings-notifications-view-group header-text="Notification Preferences">
      <ui5-user-settings-notifications-view-item item-key="email" text="Email"
        byline-text="Receive notifications by email." checked>
      </ui5-user-settings-notifications-view-item>
      <ui5-user-settings-notifications-view-item item-key="frequency" text="Frequency"
        byline-text="Choose how often to receive notifications.">
        <ui5-select slot="endContent">
          <ui5-option selected>Immediate</ui5-option>
          <ui5-option>Daily digest</ui5-option>
        </ui5-select>
      </ui5-user-settings-notifications-view-item>
    </ui5-user-settings-notifications-view-group>
  </ui5-user-settings-notifications-view>
</ui5-user-settings-item>
Screenshot 2026-08-03 at 15 15 03

Listening to events:

const notificationsItem = document.getElementById("notifications");

// Bubbles up from any item in any view inside this settings item
notificationsItem.addEventListener("switch-change", (e) => {
  console.log(`${e.detail.item.text} → ${e.detail.checked ? "ON" : "OFF"}`);
});

// Override drill-in navigation
document.getElementById("notifications-main-view").addEventListener("item-click", (e) => {
  e.preventDefault(); // skip built-in drill-in
  console.log("Custom navigation for:", e.detail.item.text);
});

@dobromiraboycheva dobromiraboycheva changed the title feat(ui5-user-settings-notifications-view): introduce NotificationsView component family feat(ui5-user-settings-notifications-view): introduce NotificationsView in UserSettingsDialog Aug 3, 2026
@github-actions

github-actions Bot commented Aug 3, 2026

Copy link
Copy Markdown

Sample sync reminder

HTML sample changed but React sample (sample.tsx) not updated:

  • patterns/UXCIntegration/Basic

Please keep both samples in sync, or ignore if the change does not apply to both.

@sap-ui5-webcomponents-release

sap-ui5-webcomponents-release Bot commented Aug 3, 2026

Copy link
Copy Markdown

🚀 Deployed on https://pr-13885--ui5-webcomponents-preview.netlify.app

@dobromiraboycheva
dobromiraboycheva deployed to netlify-preview August 18, 2026 11:54 — with GitHub Actions Active
@github-actions

github-actions Bot commented Aug 19, 2026

Copy link
Copy Markdown

👋 Heads-up: dev close is in effect

Thanks for the contribution! This repository is currently in dev close ahead of release 2.26 (scheduled 2026-08-26, UTC). See the release schedule for the full timeline.

This PR appears to introduce public-API changes (detected by diffing the Custom Elements Manifest against the latest published version on npm):

@ui5/webcomponents-fiori

  • ➕ added element: UserSettingsNotificationsView
  • ➕ added method: getAllItems
  • ➕ added method: getItemByKey
  • ➕ added property: secondary
  • ➕ added property: selected
  • ➕ added property: text
  • ➕ added event: item-click
  • ➕ added slot: additionalContent
  • ➕ added slot: default
  • ➕ added attribute: secondary
  • ➕ added attribute: selected
  • ➕ added attribute: text
  • ➕ added element: UserSettingsNotificationsViewGroup
  • ➕ added slot: default
  • ➕ added element: UserSettingsNotificationsViewItem
  • ➕ added property: bylineText
  • ➕ added property: checked
  • ➕ added property: itemKey
  • ➕ added property: navigable
  • ➕ added property: text
  • ➕ added event: switch-change
  • ➕ added slot: endContent
  • ➕ added attribute: byline-text
  • ➕ added attribute: checked
  • ➕ added attribute: item-key
  • ➕ added attribute: navigable
  • ➕ added attribute: text

Could you please hold off on merging into main until the release ships? Public-API changes are best landed in the next dev cycle so they don't slip into the release at the last minute. Once the release is out, this PR is good to go.

If this change must ship in the current release, please request a review from one or two members of @UI5/ui5-team-webc so the team can sign off explicitly.

💬 False positive? If you believe this PR doesn't actually change the public API (e.g. only internal refactoring, or an entry the detector mis-attributed), please reply on this thread — your feedback helps us improve the detection during this trial run.

Posted automatically by the Dev Close Notice workflow.

@dobromiraboycheva
dobromiraboycheva force-pushed the user-settings-notifications branch from 4f27ad9 to b4e1d7e Compare August 20, 2026 06:51
@dobromiraboycheva
dobromiraboycheva deployed to netlify-preview August 20, 2026 06:51 — with GitHub Actions Active
@dobromiraboycheva
dobromiraboycheva deployed to netlify-preview August 20, 2026 07:14 — with GitHub Actions Active
@dobromiraboycheva
dobromiraboycheva deployed to netlify-preview August 20, 2026 11:17 — with GitHub Actions Active
@dobromiraboycheva
dobromiraboycheva deployed to netlify-preview August 20, 2026 11:26 — with GitHub Actions Active
@dobromiraboycheva
dobromiraboycheva deployed to netlify-preview August 20, 2026 11:32 — with GitHub Actions Active
@dobromiraboycheva
dobromiraboycheva deployed to netlify-preview August 20, 2026 11:42 — with GitHub Actions Active
@dobromiraboycheva
dobromiraboycheva deployed to netlify-preview August 20, 2026 12:04 — with GitHub Actions Active
@dobromiraboycheva
dobromiraboycheva deployed to netlify-preview August 20, 2026 12:17 — with GitHub Actions Active
@dobromiraboycheva
dobromiraboycheva deployed to netlify-preview August 20, 2026 12:27 — with GitHub Actions Active
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@SvilenDarvenyashki SvilenDarvenyashki Awaiting requested review from SvilenDarvenyashki

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@dobromiraboycheva